<template>
  <div style="width: 100%">
    <el-drawer :visible.sync="modals" title="详情" :wrapperClosable="false" :size="1100" @closed="draChange">
      <div class="acea-row head">
        <div class="edit-btn">
          <el-button type="primary" @click="editSave">用户跟进记录</el-button>
          <el-button type="primary" @click="editSave" v-if="activeName == 2">编辑</el-button>
        </div>
      </div>
      <el-row justify="space-between" class="mt14">
        <el-col :span="24">
          <el-tabs type="border-card" v-model="activeName" @tab-click="changeTab">
            <el-tab-pane :name="item.val" v-for="(item, index) in list" :key="index" :label="item.label"> </el-tab-pane>
            <div v-if="activeName == 1">
              <div class="user-info">
                <div class="section">
                  <div class="section-hd">基本信息</div>
                  <div class="section-bd">
                    <div class="item img-item">
                      <div>头像</div>
                      <div class="value">
                        <div class="tabBox_img" v-viewer>
                          <img v-lazy="imgOssUrl + detailsData.avatar" />
                        </div>
                      </div>
                    </div>
                    <div class="item">
                      <div>登录电话：</div>
                      <div class="value">{{ detailsData.phone }}</div>
                    </div>
                    <div class="item">
                      <div>用户昵称：</div>
                      <div class="value">{{ detailsData.nick }}</div>
                    </div>
                    <div class="item">
                      <div>登录账号：</div>
                      <div class="value">{{ detailsData.username }}</div>
                    </div>

                    <div class="item">
                      <div>注册方式：</div>
                      <div class="value">
                        <span v-if="detailsData.reg_type == 0">后台注册</span>
                        <span v-else-if="detailsData.reg_type == 1">手机号</span>
                        <span v-else-if="detailsData.reg_type == 2">邮箱</span>
                        <span v-else-if="detailsData.reg_type == 3">微信</span>
                        <span v-else-if="detailsData.reg_type == 4">支付宝</span>
                        <span v-else-if="detailsData.reg_type == 5">QQ</span>
                        <span v-else-if="detailsData.reg_type == 6">账号</span>
                        <span v-else-if="detailsData.reg_type == 7">Google</span>
                      </div>
                    </div>
                    <div class="item">
                      <div>登录邮箱：</div>
                      <div class="value">{{ detailsData.email }}</div>
                    </div>
                    <div class="item">
                      <div>身份类型：</div>
                      <div class="value">
                        <span v-if="detailsData.auth_type == 0">未认证</span>
                        <span v-if="detailsData.auth_type == 9">未认证</span>
                        <span v-if="detailsData.auth_type == 1">个人</span>
                        <span v-if="detailsData.auth_type == 2">企业</span>
                      </div>
                    </div>
                    <div class="item">
                      <div>登录次数：</div>
                      <div class="value">{{ detailsData.login_total }}</div>
                    </div>
                    <div class="item">
                      <div>最后登录时间：</div>
                      <div class="value">{{ detailsData.last_login_time }}</div>
                    </div>
                    <div class="item">
                      <div>来源平台：</div>
                      <div class="value">{{ detailsData.from_app_type_name }}</div>
                    </div>
                    <div class="item">
                      <div>姓名：</div>
                      <div class="value">{{ detailsData.real_name }}</div>
                    </div>
                    <div class="item">
                      <div>性别：</div>
                      <div class="value">
                        {{ detailsData.gender == '0' ? '未知' : detailsData.gender == '1' ? '男' : '女' }}
                      </div>
                    </div>

                    <div class="item">
                      <div>出生年月：</div>
                      <div class="value">{{ detailsData.birthday }}</div>
                    </div>
                    <div class="item">
                      <div>所在地：</div>
                      <div class="value">{{ detailsData.province_name }}{{ detailsData.city_name }}</div>
                    </div>

                    <div class="item">
                      <div>国家：</div>
                      <div class="value">{{ detailsData.country_name }}</div>
                    </div>
                    <div class="item">
                      <div>所属行业：</div>
                      <div class="value">
                        <div v-for="(item, index) in detailsData.category_names" :key="index">
                          {{ item.name }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <el-tabs v-model="chooseTable" @tab-click="onClickTab">
                <el-tab-pane :label="item.name" :name="item.type" v-for="(item, index) in headeNum" :key="index" />
              </el-tabs>
              <div class="pt10">
                <el-table
                  :data="tableData"
                  border
                  style="width: 100%"
                  :header-cell-style="{
                    'text-align': 'center',
                    background: '#E8E8E8',
                    color: '#000000',
                  }"
                  :cell-style="{ 'text-align': 'center' }"
                >
                  <el-table-column key="1" prop="id" label="ID" width="120"></el-table-column>
                  <el-table-column key="2" prop="shop_name" label="企业名称" v-if="chooseTable == 1"></el-table-column>
                  <el-table-column key="3" prop="title" label="产品名称" v-if="chooseTable == 2"></el-table-column>
                  <el-table-column key="4" prop="shop_name" label="企业名称" v-if="chooseTable == 3"></el-table-column>
                  <el-table-column key="5" prop="position" label="岗位名称" v-if="chooseTable == 3"></el-table-column>
                  <el-table-column
                    key="6"
                    prop="create_time"
                    v-if="chooseTable == 1"
                    label="关注时间"
                  ></el-table-column>
                  <el-table-column
                    key="7"
                    prop="create_time"
                    v-if="chooseTable == 2"
                    label="收藏时间"
                  ></el-table-column>
                  <el-table-column
                    key="8"
                    prop="create_time"
                    v-if="chooseTable == 3"
                    label="收藏时间"
                  ></el-table-column>
                </el-table>
              </div>
              <div class="pt10 textac">
                <pagination
                  v-if="total"
                  :total="total"
                  :page.sync="page"
                  :limit.sync="limit"
                  @pagination="pageChange"
                />
              </div>
            </div>
            <div v-else-if="activeName == 2">
              <div class="user-info">
                <div class="section">
                  <div class="section-hd">认证信息</div>
                  <div class="section-bd">
                    <div class="item img-item" v-if="auth_info.certificate_photo">
                      <div>营业执照:</div>
                      <div class="value">
                        <div class="tabBox_img" v-viewer>
                          <img v-lazy="imgOssUrl + auth_info.certificate_photo" />
                        </div>
                      </div>
                    </div>
                    <div class="item" v-if="auth_info.logo">
                      <div>企业LOGO:</div>
                      <div class="value">
                        <div class="tabBox_img" v-viewer>
                          <img v-lazy="imgOssUrl + auth_info.logo" />
                        </div>
                      </div>
                    </div>
                    <div class="item" v-if="auth_info.passport_number">
                      <div>{{ auth_info.auth_type == '2' ? '营业执照号' : '身份证号码' }}:</div>
                      <div class="value">{{ auth_info.passport_number }}</div>
                    </div>
                    <div class="item" v-if="auth_info.banner">
                      <div>企业背景:</div>
                      <div class="value">
                        <div class="tabBox_img" v-viewer>
                          <img v-lazy="imgOssUrl + auth_info.banner" />
                        </div>
                      </div>
                    </div>

                    <div class="item">
                      <div>{{ auth_info.auth_type == '1' ? '真实姓名' : '企业名称' }}:</div>
                      <div class="value">
                        {{ auth_info.shop_name }}
                      </div>
                    </div>
                    <div class="item">
                      <div>联系电话</div>
                      <div class="value">
                        {{ auth_info.tel }}
                      </div>
                    </div>
                    <div class="item">
                      <div>联系人:</div>
                      <div class="value">
                        {{ auth_info.corporation }}
                      </div>
                    </div>
                    <div class="item">
                      <div>{{ origin_site == 'cn' ? '用户类型' : '商家类型' }}：</div>
                      <div class="value">
                        <div class="w200" v-if="auth_info.shop_role == 1">品牌新机</div>
                        <div class="w200" v-if="auth_info.shop_role == 2">二手贸易</div>
                        <div class="w200" v-if="auth_info.shop_role == 4">纺织工厂</div>
                      </div>
                    </div>
                    <div class="item">
                      <div>企业邮箱：</div>
                      <div class="value">
                        {{ auth_info.email }}
                      </div>
                    </div>
                    <div class="item">
                      <div>行业分类：</div>
                      <div class="value">
                        <div class="lh18" v-for="(item, index) in auth_info.category_names" :key="index">
                          {{ item.name }}
                        </div>
                      </div>
                    </div>
                    <div class="item">
                      <div>主营产品:</div>
                      <div class="value">
                        <el-tag v-for="(item, index) in auth_info.main_products" :key="index">{{ item }}</el-tag>
                      </div>
                    </div>
                    <div class="item" v-if="origin_site == 'cn'">
                      <div>企业简介:</div>
                      <div class="value">
                        {{ auth_info.shop_introduction }}
                      </div>
                    </div>

                    <div class="item">
                      <div>企业地址：</div>
                      <div class="value">
                        {{ auth_info.country_name }}{{ auth_info.province_name }}{{ auth_info.city_name
                        }}{{ auth_info.district_name }}{{ auth_info.addr }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <div class="f14 flex">
                <div class="jcc pt20">
                  <div>
                    是否商家 &nbsp;&nbsp;<el-switch
                      v-model="auth_info.is_merchant"
                      :active-value="1"
                      :inactive-value="0"
                      @change="bianji1(auth_info.shop_id, 'is_merchant', auth_info.is_merchant)"
                    >
                    </el-switch>
                  </div>
                </div>
                <div class="jcc pt20">
                  <div>
                    是否推荐&nbsp;&nbsp;<el-switch
                      v-model="auth_info.is_recommend"
                      :active-value="1"
                      :inactive-value="0"
                      @change="bianji1(auth_info.shop_id, 'is_recommend', auth_info.is_recommend)"
                    >
                    </el-switch>
                  </div>
                </div>
                <div class="jcc pt20">
                  <div>
                    是否热门&nbsp;&nbsp;<el-switch
                      v-model="auth_info.is_hot"
                      :active-value="1"
                      :inactive-value="0"
                      @change="bianji1(auth_info.shop_id, 'is_hot', auth_info.is_hot)"
                    >
                    </el-switch>
                  </div>
                </div>
              </div>
              <div class="flex pt20 f14 gap20">
                <div class="jcc">
                  <div>
                    <el-button type="primary" class="pd4">咨询数({{ ShopStatList.inquiry }})</el-button>
                  </div>
                  <div class="pt10">
                    <el-button type="primary" class="pd4">订单数({{ ShopStatList.order }})</el-button>
                  </div>
                  <div class="pt10">
                    <el-button type="primary" class="pd4">产品数({{ ShopStatList.product }})</el-button>
                  </div>
                </div>
                <div class="jcc">
                  <div>
                    <el-button type="primary" class="pd4">我的求购数({{ ShopStatList.buy }})</el-button>
                  </div>
                  <div class="pt10">
                    <el-button type="primary" class="pd4">资产处置数({{ ShopStatList.assets }})</el-button>
                  </div>
                  <div class="pt10">
                    <el-button type="primary" class="pd4">招聘岗位数({{ ShopStatList.job }})</el-button>
                  </div>
                </div>
              </div>
              <el-tabs v-model="chooseTable" @tab-click="onClickTab">
                <el-tab-pane :label="item.name" :name="item.type" v-for="(item, index) in headeNum1" :key="index" />
              </el-tabs>
            </div>
          </el-tabs>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import { getUserRead, getFollow, getFavorites, getJobFavoriteList, getShopStat, getBrandMall } from '@/api/all';
export default {
  name: 'userDetails',
  props: {
    rowData: {
      type: Object,
      default: () => ({}),
    },
  },

  data() {
    return {
      activeName: '1',
      list: [
        { val: '1', label: '用户信息' },
        { val: '2', label: '完善认证信息' },
        { val: '3', label: '商家运营' },
      ],
      modals: true,
      detailsData: {},
      loading: false,

      total: 0,
      columns: [],
      userLists: [],
      headeNum: [
        { type: '1', name: '企业关注记录' },
        { type: '2', name: '产品收藏记录' },
        { type: '3', name: '岗位收藏数' },
      ],

      tableData: [],
      origin_site: '',
      page: 1,
      limit: 20,
      chooseTable: '1',
      auth_info: {},
      ShopStatList: {},
    };
  },
  created() {},
  methods: {
    async getUserReadDetails() {
      await getUserRead({ id: this.rowData.user_id }).then((res) => {
        this.detailsData = res.data.user_info;
        this.auth_info = res.data.auth_info;
        this.origin_site = res.data.user_info.origin_site;
      });
      this.getList();

      getShopStat({
        user_id: this.rowData.user_id,
      }).then((res) => {
        this.ShopStatList = res.data;
      });
    },

    async getList() {
      let data = {
        user_id: this.rowData.user_id,
        page: this.page,
        size: this.limit,
      };

      const resData = '';

      if (this.chooseTable == '1') {
        data.origin_site = this.origin_site;
        resData = await getFollow(data);
      } else if (this.chooseTable == '2') {
        data.origin_site = this.origin_site;
        resData = await getFavorites(data);
      } else if (this.chooseTable == '3') {
        resData = await getJobFavoriteList(data);
      }

      this.total = resData.data.total;
      this.tableData = resData.data.data;
    },

    //编辑
    async bianji1(v, t, n) {
      console.log(123123123);
      let data = {
        shop_id: v,
        type: t,
        val: n,
      };

      getBrandMall(data)
        .then((res) => {
          this.$message.success(res.msg);
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },

    onClickTab() {
      this.page = 1;
      this.getList();
    },
  },
  watch: {
    rowData: {
      deep: true,
      handler(newVal) {
        if (newVal && Object.keys(newVal).length > 0) {
          this.getUserReadDetails(); // 触发数据加载
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}

.flex {
  display: flex;

  .jcc {
    margin-right: 20px;
  }
}
::v-deep.el-drawer__body {
  padding: 20px 0;
}
::v-deep.el-tabs--border-card > .el-tabs__content {
  padding: 0 35px;
}
::v-deep.el-tabs--border-card > .el-tabs__header,
::v-deep.el-tabs--border-card > .el-tabs__header .el-tabs__item:active {
  border: none;
  height: 40px;
}
::v-deep.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  border: none;
  border-top: 2px solid var(--prev-color-primary);
  font-size: 13px;
  font-weight: 500;
  color: #303133;
  line-height: 16px;
}
::v-deep.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  border: none;
}
::v-deep.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  margin-top: 0;
  transition: none;
  height: 40px !important;
  line-height: 40px !important;
  // width: 92px !important;
  font-size: 13px;
  font-weight: 400;
  color: #303133;
  line-height: 16px;
}
::v-deep.el-tabs--border-card {
  border: none;
  box-shadow: none;
}
.head {
  position: relative;
  // padding: 0 35px;
  .edit-btn {
    // position: absolute;
    right: 10px;
    top: 0px;
    display: flex;
    align-items: center;
  }
}
.dashboard-workplace {
  &-header {
    &-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin-right: 16px;
      font-weight: 600;
    }

    &-tip {
      width: 82%;
      display: inline-block;
      vertical-align: middle;

      &-title {
        font-size: 13px;
        color: #000000;
        margin-bottom: 12px;
      }

      &-desc {
        &-sp {
          width: 33.33%;
          color: #17233d;
          font-size: 13px;
          display: inline-block;
        }
      }
    }

    &-extra {
      .ivu-col {
        p {
          text-align: right;
        }

        p:first-child {
          span:first-child {
            margin-right: 4px;
          }

          span:last-child {
            color: #808695;
          }
        }

        p:last-child {
          font-size: 22px;
        }
      }
    }
  }
}

.width-add {
  width: 40px;
}
.mr30 {
  margin-right: 30px;
}

.user-info {
  .section {
    padding: 25px 0;
    border-bottom: 1px dashed #eeeeee;

    &-hd {
      padding-left: 10px;
      border-left: 3px solid var(--prev-color-primary);
      font-weight: 500;
      font-size: 14px;
      line-height: 16px;
      color: #303133;
    }

    &-bd {
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      flex: 0 0 calc((100% - 60px) / 3);
      display: flex;
      margin: 16px 30px 0 0;
      font-size: 13px;
      color: #666;

      &:nth-child(3n + 3) {
        margin: 16px 0 0;
      }
    }

    .value {
      flex: 1;
    }
    .avatar {
      width: 60px;
      height: 60px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 5px;

  img {
    width: 100%;
    height: 100%;
  }
}

.img-item {
  display: flex;
  align-items: center;
}
</style>
<style scoped lang="stylus">
.user_menu ::v-deep .ivu-menu {
  width: 100% !important;
}
</style>
